{% extends "base.html" %}
{% load staticfiles %}

{% block title %}后台系统自动启停管理{% endblock %}

{% block styles %}
    <style>

        .user-active {
            color: red;
        }

        .logo-text {
            padding-left: 15px;
            padding-right: 15px;
            color: rgba(255, 255, 255, .8);
            height: 49px;
            font-weight: 300;
            line-height: 50px;
            font-size: 18px;
            text-align: center;
        }

        th, td {
            white-space: nowrap;
        }

        tr.active {
            border-left: 3px solid #fdc00f;
        }

        table {
            font-size: 12px;
        }

        .user-area ul {
            padding-left: 20px;
        }

        .user-area li {
            cursor: pointer;
            padding: 2px 0;
        }

        .user-area li a {
            display: block;
        }

        .user-area li.active {
            font-weight: bold;
            color: red;
        }

        .user-area li.active a {
            color: red;
        }

        .role-area tr td a {
            display: block;
        }

        .role-area tr.active {
            background-color: #f1f7fd;
            border-left: 3px solid #fdc00f;
        }

        .panel-body {
            font-size: 12px;
        }

        .permission-area tr.root {
            background-color: #f1f7fd;
        }

        .permission-area tr.root td i {
            margin: 3px;
        }

        .permission-area .node {

        }

        .permission-area .node input[type='checkbox'] {
            margin: 0 5px;
        }

        .permission-area .node .parent {
            padding: 5px 0;
        }

        .permission-area .node label {
            font-weight: normal;
            margin-bottom: 0;
            font-size: 12px;
        }

        .permission-area .node .children {
            padding: 0 0 0 20px;
        }

        .permission-area .node .children .child {
            display: inline-block;
            margin: 2px 5px;
        }

        .select-help {
            float: right;
        }

        .select-help label {
            font-weight: normal;
            cursor: pointer;
        }

        .select-help .check-all {
            float: left !important;
            display: inline-block;
            margin-right: 8px;
            font-size: 12px;
        }

    .select-help{
            float: left !important;
            {#display: inline-block;#}
            {#margin-right: 8px;#}
        }
    .panel-heading{
        padding: 5px!important;
    }

    html{
        overflow-y: auto !important;
    }

    </style>
{% endblock %}

{% block content %}
    <!--新增交易日模态框-->
    <div class="modal fade" data-backdrop="static" id="add_modal_td" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">新增交易日</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div style="margin-top:3%; display: block">
                            <label>交易日</label>
                            <input class="opts" id="tradingday" name="tradingday" type="text"
                                   placeholder="交易日,格式为：2020-01-01">
                            <div id="tradingday_spaninfo" class="input-validation"></div>
                        </div>
                        <div style="height: 20px; display: block">
                            <div style="padding-left:120px; float: left;">
                                <span class="btn-cancel btn-stc" onclick="add_modal_hide()">取消</span>
                            </div>
                            <div style="padding-left:5px;float: left;">
                                <span class="btn-confirm btn-stc" id="add_mod_id" amID="" onclick="addORmodify_DB()">确认</span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!--导入模态框-->
    <div class="modal fade" id="myModalInput" tabindex="-1" role="dialog" aria-labelledby="myModalLabelInput">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    {#<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>#}
                    <span id="closeXX" type='button' class='btn btn-default' onclick="input_modal_hide()" style="float: right;"><i class='fa fa-close'></i></span>
                    <h4 class="modal-title" id="myModalLabelInput">请选择CSV文件</h4>
                </div>
                <div class="modal-body">
                    <div id="inputInfooo" style="color: red;font-size: 14px"></div>
                    <input type="file" name="txt_file" id="txt_file" multiple class="file-loading"/>
                    {#multiple表示允许同时上传多个文件，class=“file-loading”表示标签的样式。这里很重要，如果class="file"，则中文化不能生效。#}
                </div>

            </div>
        </div>
    </div>

    <!--新增启停时间模态框-->
    <div class="modal fade" data-backdrop="static" id="add_modal_StartStop" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">新增启停时间</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div style="margin-top:3%; display: block">
                            <label>启动时间</label>
                            <input class="opts" id="start_time" name="tradingday" type="text"
                                   placeholder="启动时间,格式为：00:00:00">
                            <div id="starttime_spaninfo" class="input-validation"></div>
                        </div>
                        <div style="margin-top:3%; display: block">
                            <label>停止时间</label>
                            <input class="opts" id="stop_time" name="tradingday" type="text"
                                   placeholder="停止时间,格式为：00:00:00">
                            <div id="stoptime_spaninfo" class="input-validation"></div>
                        </div>
                        <div style="height: 20px; display: block">
                            <div style="padding-left:120px; float: left;">
                                <span class="btn-cancel btn-stc" onclick="add_modalTradeTime_hide()">取消</span>
                            </div>
                            <div style="padding-left:5px;float: left;">
                                <span class="btn-confirm btn-stc" id="add_modTradeTime_id" amID="" onclick="addORmodifyTradeTime_DB()">确认</span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!--删除模态框-->
    <div class="modal fade" data-backdrop="static" id="modal_delete">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">删除交易通道确认</h4>
                </div>
                <div class="modal-body">
                    <div style="margin-top:3%; display: block" id="confirm_paper">
                    </div>
                    <div style="height: 30px; display: block;margin-top: 20px">
                        <div style="padding-left:120px; float: left;">
                            <span class="btn-cancel btn-stc" onclick="del_modal_hide()">取消</span>
                        </div>
                        <div style="padding-left:5px; float: left;">
                            <span id="del" sid="" class="btn-confirm btn-stc" onclick="del_DB()">确定</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--删除启停时间模态框-->
    <div class="modal fade" data-backdrop="static" id="modalTradeTime_delete">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">删除启停时间确认</h4>
                </div>
                <div class="modal-body">
                    <div style="margin-top:3%; display: block" id="confirm_paperTT">
                    </div>
                    <div style="height: 30px; display: block;margin-top: 20px">
                        <div style="padding-left:120px; float: left;">
                            <span class="btn-cancel btn-stc" onclick="del_modalTradeTime_hide()">取消</span>
                        </div>
                        <div style="padding-left:5px; float: left;">
                            <span id="del" sid="" class="btn-confirm btn-stc" onclick="delTradeTime_DB()">确定</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="content-header">
        <h1>
            后台系统自动启停
            <small>{{ allHtml.title }}</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i>后台系统自动启停</a></li>
            <li class="active">后台系统自动启停</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#fa-icons" data-toggle="tab">后台系统自动启停</a></li>
                    </ul>
                    <div class="tab-content ">
                        <div class="tab-pane active mailbox-messages" id="fa-icons">
                            <div class=" mailbox-messages">
                                <div class="luffy-container">
                                    <!--交易日管理-->
                                    <div class="col-md-6 role-area">
                                        <form>
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <table>
                                                        <tr>
                                                            <td class="panel-heading"><i class="fa fa-gavel" aria-hidden="true"></i>交易日管理</td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <div class="tab-pane active" id="fa-check">
                                                                    <div class="lbl-query">
                                                                        <span onclick="add_modal_show()" type='button' class='btn btn-success btn-xs btn-flat btn_operation'> <i class='fa fa-plus'></i> 新增</span>
                                                                    </div>
                                                                    <div class="lbl-query">
                                                                        <span onclick="del_modal_show()" type='button' class='btn btn-danger btn-xs btn-flat btn_operation'> <i class='fa fa-trash'></i> 删除</span>
                                                                    </div>
                                                                    <div class="lbl-query">
                                                                        <span onclick="input_modal_show()" type='button' class='btn btn-primary btn-xs btn-flat btn_operation'> <i class='fa fa-upload'></i> 导入</span>
                                                                    </div>
                                                                    <div class="lbl-query"><span style="font-size: 14px;">交易日</span>
                                                                        <input class="input-query" type="text" id="tradingdaySelect" placeholder="2020-01-01">
                                                                        <span id="tradingdaySpaninfo" style="color: red;font-size: 14px"></span>
                                                                        <span onclick="tdselect()" type='button' class='btn btn-warning btn-xs btn-flat btn_operation'> <i class='fa fa-search'></i> 查询</span>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </div>
                                                <table class="table">
                                                    <tr class="root">
                                                        <td style="background-color: #F1F7FD">
                                                            <div class="select-help">
                                                                <div class="check-all">
                                                                    <label for="check_all_1">全选</label>
                                                                    <input id="check_all_1" class="minimal"
                                                                           type="checkbox">
                                                                </div>
                                                            </div>
                                                            <div class="lbl-query" style="float: left;margin-left: 45px">交易日</div>
                                                            <div class="lbl-query" style="float: left;margin-left: 60px">操作</div>

                                                        </td>
                                                    </tr>
                                                    <tr class="node">
                                                        <td id="tradingday_html">
                                                            {% for perm_dict in caleObj %}
                                                                {% for key,values in perm_dict.items %}
                                                                    <div class="parent">
                                                                    </div>
                                                                    <div class="children">
                                                                        <div class="row">
                                                                            <div class="col-xs-4">
                                                                                <div class="child"
                                                                                     style="text-align: center;">
                                                                                    <input class="minimal"
                                                                                           name="tradingdays"
                                                                                           type="checkbox"
                                                                                           value="{{ values }}" style="margin-left: 10px">
                                                                                    <label for="permission_17" style="font-weight: normal;width: 16.5px;height: 17px; margin-left: 55px">{{ values }}</label>
                                                                                    <span class="fa fa-trash" style="margin-left: 100px;" id="del_tradingday" onclick="del_modal_show('{{ values }}')"></span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                {% endfor %}
                                                            {% endfor %}
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </form>
                                    </div>
                                    <!--自动启停时间管理-->
                                    <div class="col-md-6 permission-area">
                                        <form>
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <table>
                                                        <tr>
                                                            <td class="panel-heading"><i class="fa fa-gavel" aria-hidden="true"></i>自动启停时间管理</td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <div class="tab-pane active" id="fa-check">
{#                                                                    <div class="lbl-query">#}
{#                                                                        <span style="font-size: 14px;">启动时间</span>#}
{#                                                                        <input class="input-query" type="text" id="starttimeSelect" placeholder="00:00:00">#}
{#                                                                        <span id="starttimeSelectSpaninfo" style="color: red;font-size: 14px"></span>#}
{#                                                                        <span style="font-size: 14px;">停止时间</span>#}
{#                                                                        <input class="input-query" type="text" id="endtimeSelect" placeholder="00:00:00">#}
{#                                                                        <span id="endtimeSelectSpaninfo" style="color: red;font-size: 14px"></span>#}
{#                                                                        <span onclick="timeselect()" type='button' class='btn btn-warning btn-xs btn-flat btn_operation'> <i class='fa fa-search'></i> 查询</span>#}
{#                                                                    </div>#}
                                                                        <div class="lbl-query">
                                                                            <span onclick="add_modalTradeTime_show()" type='button' class='btn btn-success btn-xs btn-flat btn_operation'> <i class='fa fa-plus'></i> 新增</span>
                                                                        </div>
                                                                        <div class="lbl-query">
                                                                            <span onclick="del_modalTradeTime_show()" type='button' class='btn btn-danger btn-xs btn-flat btn_operation'> <i class='fa fa-trash'></i> 删除</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </div>
                                                <table class="table">
                                                    <tr class="root">
                                                        <td>
                                                            <div class="select-help">
                                                                <div class="check-all">
                                                                    <label for="check_all_1">全选</label>
                                                                    <input id="check_all_1" class="minimal"
                                                                           type="checkbox">
                                                                </div>
                                                            </div>
                                                            <div class="lbl-query" style="float: left;margin-left: 45px">启动时间</div>
                                                            <div class="lbl-query" style="float: left;margin-left: 45px">停止时间</div>
                                                            <div class="lbl-query" style="float: left;margin-left: 55px">操作</div>

                                                        </td>
                                                    </tr>
                                                    <tr class="node">
                                                        <td id="tradetime_html">
                                                            {% for perm_dict in ttObj %}
                                                                {% for key,values in perm_dict.items %}
                                                                    <div class="children">
                                                                        <div class="row">
                                                                            <div class="col-xs-4">
                                                                                <div class="child"
                                                                                     style="text-align: center;">
                                                                                    <input class="minimal"
                                                                                           name="startstop"
                                                                                           type="checkbox"
                                                                                           value="{{ values.2 }}">
                                                                                    <label for="permission_17" style="width: 50px;height: 20px;font-size: 10px; margin-left: 30px">{{ values.0 }}</label>
                                                                                    <label for="permission_17" style="margin-left: 50px;width: 50px;height: 20px;font-size: 10px">{{ values.1 }}</label>
                                                                                    <span class="fa fa-trash" style="margin-left: 50px;" id="del_tradingday" onclick="del_modalTradeTime_show({{ values.2 }})"></span>
                                                                                    <span class="fa fa-edit" style="margin-left: 5px;" id="addAndModify_tradingday" onclick="modifyTradeTime_field_show('{{ values.2 }}')"></span>
                                                                                </div>
                                                                            </div>

                                                                        </div>
                                                                    </div>
                                                                {% endfor %}
                                                            {% endfor %}
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

{% endblock %}

{% block scripts %}

    <script>
        //全选，重点是lable的结构，没搞明白...
        $('.check-all input:checkbox').change(function () {
            $(this).parents('.root').next().find(':checkbox').prop('checked', $(this).prop('checked'));
        });

        //新增，lable标签的onclick事件显示新增模态框，此框中有确认和取消按钮，取消：隐藏模态框；确认：发送post请求到后台新增数据；
        //1.显示模态框

        //一.交易日新增##############
        function add_modal_show() {
            $('#add_modal_td').modal('show');
        }

        //2.取消
        function add_modal_hide() {
            $('#add_modal_td').modal('hide');
            $("input").val("");
        }

        //3.确认添加/修改
        function addORmodify_DB() {
            var tradingday = $('#tradingday').val();
            var id = $('#add_mod_id').attr('amID')
            {#data = {#}
            {#    'tradingday': tradingday,#}
            {# }#}
            {#var JsonData = JSON.stringify(data)#}
            if (tradingday.length !== 10) {
                $('#tradingday_spaninfo').text('交易日格式错误');
                return;
            }
            $.post("{% url 'Manager:caleandtime' %}", {'data': tradingday, 'addORmodify_DB': 1}, function (r) {
                if (r === 'y') {
                    window.location.reload();
                } else {
                    alert(r);
                    window.location.reload();
                }
            });


        }

        //4.修改时显示字段值，修改与新增唯一的不同是修改时显示字段值
        function modify_field_show(id) {
            $('#add_mod_id').attr('amID', id);
            $('#add_modal_td').modal('show');
            $('.modal-title').text('修改持仓账户映射');
            $("select").val("");
            $.get("{% url 'Manager:accountmapping' %}", {'modify_am': id}, function (r) {
                if (r) {
                    var data = (r.rows)[0]
                    for (var key in data) {
                        if ($('#' + key)) {
                            $('#' + key).val(data[key]);
                        }

                    }
                }
            });
        };

        //二.启停时间新增##############
        function add_modalTradeTime_show() {
            $('#add_modal_StartStop').modal('show');
            $('.modal-title').text('新增启停时间');
        }

        //2.取消
        function add_modalTradeTime_hide() {
            $('#add_modal_StartStop').modal('hide');
            $("input").val("");
            $('#starttime_spaninfo').text('');
            $('#stoptime_spaninfo').text('');
        }

        //3.确认添加/修改
        function addORmodifyTradeTime_DB() {
            //提交时置空错误提示
            $('#starttime_spaninfo').text('');
            $('#stoptime_spaninfo').text('');

            var start_time = $('#start_time').val();
            var stop_time = $('#stop_time').val();
            var id = $('#add_modTradeTime_id').attr('amID')
            data = {
                'start_time': start_time,
                'stop_time': stop_time,
                'id': id,
            }
            var JsonData = JSON.stringify(data)
            if (start_time.length !== 8) {
                $('#starttime_spaninfo').text('启动时间格式错误');
                return;
            } else if (stop_time.length !== 8) {
                $('#stoptime_spaninfo').text('停止时间格式错误');
                return;
            }
            $.post("{% url 'Manager:caleandtime' %}", {'data': JsonData, 'addORmodifyTradeTime_DB': 1}, function (r) {
                if (r === 'y') {
                    window.location.reload();
                } else if (r === 'r1') {
                    $('#starttime_spaninfo').text('启动时间段重复');
                } else if (r === 'r2') {
                    $('#stoptime_spaninfo').text('停止时间段重复');
                } else {
                    alert(r);
                    window.location.reload();
                }
            });
        }

        //4.修改时显示字段值，修改与新增唯一的不同是修改时显示字段值
        function modifyTradeTime_field_show(id) {
            $('#add_modTradeTime_id').attr('amID', id);
            $('#add_modal_StartStop').modal('show');
            $('.modal-title').text('修改启停时间');
            $("select").val("");
            $.get("{% url 'Manager:caleandtime' %}", {'modify_ss': id}, function (r) {
                if (r) {
                    console.log(r);
                    {#var data = (r.rows)[0]#}
                    for (var key in r) {
                        if ($('#' + key)) {
                            $('#' + key).val(r[key]);
                        }

                    }
                }
            });
        };


        //删除，lable标签的onclick时间显示删除模态框，此框中有确认和取消按钮，取消：隐藏模态框；确认：发送post请求到后台删除数据；
        //1.显示模态框
        //一：交易日删除############
        function del_modal_show(id) {
            console.log(id, typeof id)
            $('#modal_delete').modal('show');
            if (id !== undefined) {
                $('#confirm_paper').text('确认删除交易日"' + id + '"吗？');
            } else {
                $('#confirm_paper').text('确认删除您已选择的交易日吗？');
            }
            $('#del').attr('sid', id);
        }

        //2.取消
        function del_modal_hide() {
            $('#modal_delete').modal('hide')
        }

        //3.确认删除
        function del_DB() {
            d = $('#del').attr('sid');
            console.log('单个删除的', d);
            {#获取所有的被选中的交易日#}
            var tradingdayList = Array()
            $("input[name='tradingdays']").each(function () {
                if ($(this).is(":checked")) {
                    tradingdayList.push($(this).val())
                }
            })
            console.log(tradingdayList, '<---被选中的交易日');
            $.post("{% url 'Manager:caleandtime' %}", {'id': d, 'del_DB': 1, 'tradingdayList': JSON.stringify(tradingdayList)}, function (r) {
                if (r === 'y') {
                    window.location.reload();
                } else {
                    alert(r);
                    window.location.reload();
                }
            });
        };

        //二：启停时间删除##########
        function del_modalTradeTime_show(id) {
            console.log(id, typeof id)
            $('#modalTradeTime_delete').modal('show');
            $('#confirm_paperTT').text('确认删除启停时间段吗？');
            $('#del').attr('sid', id);
        }

        //2.取消
        function del_modalTradeTime_hide() {
            $('#modalTradeTime_delete').modal('hide')
        }

        //3.确认删除
        function delTradeTime_DB() {
            d = $('#del').attr('sid');
            console.log('单个删除的', d);
            //获取所有的被选中的交易日
            var ssList = Array()
            $("input[name='startstop']").each(function () {
                if ($(this).is(":checked")) {
                    ssList.push($(this).val())
                }
            })
            console.log(ssList, '<---被选中的交易日');
            $.post("{% url 'Manager:caleandtime' %}", {'id': d, 'delTradeTime_DB': 1, 'tradingdayList': JSON.stringify(ssList)}, function (r) {
                if (r === 'y') {
                    window.location.reload();
                } else {
                    alert(r);
                    window.location.reload();
                }
            });
        }


        //查询，交易日查询，获取查询信息，发送post请求向后台查询*****
        function tdselect() {
            //每次进入查询函数，提示信息为空
            $('#tradingdaySpaninfo').text('');
            //获取用户输入的内容
            var tradingday = $("#tradingdaySelect").val();
            if (tradingday === '') {
                $('#tradingdaySpaninfo').text('交易日不可为空。');
                return;
            }

            // 整理发送后台的数据
            var data = {
                "tradingday": tradingday,
            };

            var JsonData = JSON.stringify(data);
            $.post("{% url 'Manager:caleandtime' %}", {'data': JsonData, 'td_search': 1}, function (r) {
                $('#tradingday_html').html('');
                var temp_list = []
                for (var i in r) {
                    var v = r[i]['tradingday'];
                    b = '<div class="parent">\n' +
                        '                                                                    </div>\n' +
                        '                                                                    <div class="children">\n' +
                        '                                                                        <div class="row">\n' +
                        '                                                                            <div class="col-xs-4">\n' +
                        '                                                                                <div class="child"\n' +
                        '                                                                                     style="text-align: center;">\n' +
                        '                                                                                    <input class="minimal"\n' +
                        '                                                                                           name="tradingdays"\n' +
                        '                                                                                           type="checkbox"\n' +
                        '                                                                                           value="' + v + '">\n' +
                        '                                                                                    <label for="permission_17" style="font-weight: normal;width: 16.5px;height: 17px">' + v + '</label>\n' +
                        '                                                                                    <span class="fa fa-trash" style="margin-left: 50px;" id="del_tradingday" onclick="del_modal_show(\'' + v + '\')"></span>\n' +
                        '                                                                                </div>\n' +
                        '                                                                            </div>\n' +
                        '                                                                        </div>\n' +
                        '                                                                    </div>'
                    temp_list.push(b)
                }

                $('#tradingday_html').append(temp_list);

            });

        }

        ////查询，启停时间查询，获取查询信息，发送post请求向后台查询*****
        function timeselect() {
            //每次进入查询函数，提示信息为空
            $('#starttimeSelectSpaninfo').text('');
            $('#endtimeSelectSpaninfo').text('');
            //获取用户输入的内容
            var starttimeSelect = $("#starttimeSelect").val();
            var endtimeSelect = $("#endtimeSelect").val();
            {#//校验格式#}
            {#if (starttimeSelect.length !== 8) {#}
            {#    $('#starttimeSelectSpaninfo').text('启动时间格式错误');#}
            {# } else if (endtimeSelect.length !== 8) {#}
            {#    $("#endtimeSelectSpaninfo").text('停止时间格式错误');#}
            {# }#}

            // 整理发送后台的数据
            var data = {
                "start_time": starttimeSelect,
                "stop_time": endtimeSelect,
            };

            var JsonData = JSON.stringify(data);
            $.post("{% url 'Manager:caleandtime' %}", {'data': JsonData, 'sstime_search': 1}, function (r) {
                $('#tradetime_html').html('');
                var temp_list = []
                for (var i in r) {
                    var start_time = r[i]['id'][0];
                    var stop_time = r[i]['id'][1];
                    var id = r[i]['id'][2];
                    b = '<div class="children">\n' +
                        '                                                                        <div class="row">\n' +
                        '                                                                            <div class="col-xs-4">\n' +
                        '                                                                                <div class="child"\n' +
                        '                                                                                     style="text-align: center;">\n' +
                        '                                                                                    <input class="minimal"\n' +
                        '                                                                                           name="tradingdays"\n' +
                        '                                                                                           type="checkbox"\n' +
                        '                                                                                           value="' + id + '">\n' +
                        '                                                                                    <label for="permission_17" style="width: 50px;height: 20px;">' + start_time + '</label>\n' +
                        '                                                                                    <label for="permission_17" style="margin-left: 50px;width: 50px;height: 20px;">' + stop_time + '</label>\n' +
                        '                                                                                    <span class="fa fa-trash" style="margin-left: 50px;" id="del_tradingday" onclick="del_modal_show(\'' + id + '\')"></span>\n' +
                        '                                                                                    <span class="fa fa-edit" style="margin-left: 5px;" id="addAndModify_tradingday" onclick="modifyTradeTime_field_show(\'' + id + '\')"></span>\n' +
                        '                                                                                </div>\n' +
                        '                                                                            </div>\n' +
                        '\n' +
                        '                                                                        </div>\n' +
                        '                                                                    </div>'


                    temp_list.push(b)
                }

                $('#tradetime_html').append(temp_list);

            });

        }

        //导入：读取csv中的内容，写入到数据库中
        function ReadCSV_DB() {
            $.post("{% url 'Manager:caleandtime' %}", {'csv_db': 1}, function (r) {
                console.log(r);
            })
        }


        //导入：Input、、、
        //1.点击导入按钮显示模态框
        //一.交易日新增##############
        function input_modal_show() {
            $('#myModalInput').modal('show');
        }

        //2.取消
        function input_modal_hide() {
            $('#myModalInput').modal('hide');
            $("#inputInfooo").text("");
            $('.file-preview-thumbnails.clearfix').html("");
        }

        // 2.页面选择文件
        //2.1:初始化input框
        var aryFiles = Array();
        $('#txt_file').fileinput({
            language: 'zh',     // 设置语言，需要引入locales/zh.js文件
            uploadUrl: '/strategy/caleandtime/input',     // 上传路径
            allowedFileExtensions: ['csv'],//接收的文件后缀
            maxFileSize: 0,     // 上传文件大小限制，触发 msgSizeTooLarge 提示
            // {name}：将被上传的文件名替换，{size}：将被上传的文件大小替换，{maxSize}：将被maxFileSize参数替换。
            // msgSizeTooLarge: '"{name}" ({size} KB) 超过允许的最大上传大小 {maxSize} KB。请重新上传!',
            showPreview: true,  // 展示预览
            showUpload: true,   // 是否显示上传按钮
            showCaption: true,  // 是否显示文字描述
            showClose: false,   // 隐藏右上角×
            uploadAsync: true, // 是否异步上传
            initialPreviewShowDelete: true, // 预览中的删除按钮
            autoReplace: true,  // 达到最大上传数时，自动替换之前的附件
            uploadExtraData: function () {  // uploadExtraData携带附加参数，上传时携带csrftoken
                return {csrfmiddlewaretoken: $.cookie('csrftoken'), inputBtn_trade: 1}
            },
            initialPreview: [],　　// 默认预览设置，回显时会用到
            initialPreviewConfig: [],　　// 默认预览的详细配置，回显时会用到
            browseClass: "btn btn-primary", //按钮样式
            //dropZoneEnabled: false,//是否显示拖拽区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount: 10, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data',
            validateInitialCount: true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

        }).on("fileuploaded", function (e, data, previewId, index) {
            if (data.response['isSuccess'] === 'false') {
                $("#inputInfooo").text(data.response['info']);
                return;
            } else if (data.response['isSuccess'] === 'ok') {
                $("#inputInfooo").text('导入成功');
            }else if(data.response['isSuccess'] === 'error'){
                $("#inputInfooo").text(data.response['info']);
                return;
            }
            // 上传成功后触发的事件
        }).on("fileclear", function (e) {
            // 右下角remove按钮钮触发的事件，用该事件批量删除
        }).on("fileloaded", function (e, file, previewId) {
            // aryFile.length = 0;
            // 加载预览后触发的事件，将所有文件名添加到全局变量 aryFiles 数组中
            aryFiles.push(file.name);
        })

    </script>
{% endblock %}